<template>
	<view class="certification">
		<view class="stepOne" v-if="step === 0">
			<view class="title">企业信息认证</view>
			<i-formItem title="企业名称">
				<input placeholder-class="placeholder-class" v-model="formData.merAuthName" type="text" placeholder="营业执照上的名称">
			</i-formItem>
			<i-formItem align="top" title="企业性质" >
		        <view class="selectlist">
		        	<view @click="selectQy(item)" :class="{selectItemActive: formData.enterpriseType === item.value}" class="selectItem" v-for="(item,index) in enterprise_type" :key='item.value'>{{item.label}}</view>
		        </view>
			</i-formItem>
			<i-formItem title="注册号">
				<input placeholder-class="placeholder-class" v-model="formData.registerNum" type="text" placeholder="统一社会信用代码">
			</i-formItem>
		
			<view class="buttons" style="padding-bottom: 48rpx;">
				<i-buttons color="#fff" size="32rpx" bgColor="#FB652E" radius="4" @click="nextStep(1)" padding="18rpx 0"
					:disabled="stepDisabled">下一步</i-buttons>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		reactive,
		ref,
	} from "vue";
	import {
		checkForm,
		showTost,
		navTo
	} from "../../utils/common";
	import {
		getReceiveToken
	} from "../../api/leshua";
	import {
		onUnload,
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import useStore from '../../stores/index'

	const formData = reactive({
		"merAuthName": "",
		"enterpriseType": "",
		"registerNum": "",
		"legalName": "",
		"legalIdNum": "",
		"legalMobile": "",
		"bankBranchName": "",
		"bankDeposit": "",
		"bankNo": "",
		"bankReservedMobile": "",
		"smsCode": "",
		"unionBank": "",
		"accountType": "",
	})
	const store = useStore()
	const step = ref(0)
	const one = ref(0)
	const stepDisabled = ref(false)
	const type = ref('')

	const enterprise_type = [{'value':1,'label':'个人'},{'value':2,'label':'个体'},{'value':3,'label':'企业'}]
	// const enterprise_type = [{'value':2,'label':'个体'},{'value':3,'label':'企业'}]
	
	onLoad((option) => {
		if (option.type) {
			type.value = option.type
		}
		store.setDictList('enterprise_type')
	})

	onShow(() => {
		one.value = 1
	})


	const selectQy = (e : { value: string}) => {
		formData.enterpriseType = e.value
	}

	const nextStep = (i : number) => {
		switch (i) {
			case 1:
				toSigning()
				break;
			case 2:
				// saveImage()
				break;
			case 3:
				// toSigning()
				break;
			default:
				break;
		}

	}

	const toSigning = async () => {
		const { data } = await getReceiveToken({ subjectType: formData.enterpriseType,  subjectId: formData.registerNum})
		store.setOilUrl(data)
		navTo('/pages/views/web_view', 'redirectTo')
	}
	
	uni.$on('bankDeposit', (data) => {
		formData.bankDeposit = data
	})
	
	onUnload(() => {
		uni.$off('bankDeposit', () => { })
	})
</script>

<style lang="scss" scoped>
	.certification {
		width: 100%;
		min-height: 100vh;
		background-color: #fff;

		.lines {
			position: relative;
			height: 4rpx;
			width: 100%;
			background: rgba(251, 101, 46, 0.1);

			.line {
				position: absolute;
				height: 4rpx;
				background: #FB652E;
				transition: all 0.2s ease-out;
			}
		}



		.stepOne {
			@include flexC;
			width: calc(100% - 48rpx);
			margin: 0 auto;
			margin-top: 36rpx;
			transition: all 0.3s ease-out;
			position: relative;

			.title {
				@include titlefont(40rpx);
				margin-bottom: 16rpx
			}



			.bodytitle {
				@include titlefont(32rpx);
				margin-bottom: 16rpx
			}

			text {
				@include dfont(26rpx);
				color: #A0A0AD;
				margin-bottom: 40rpx;
			}

			.buttons {
				margin-top: 40rpx;
			}

			input {
				width: 70%;
			}

			.float {
				position: absolute;
				@include flexRC;
				width: 100%;
				bottom: 160rpx;
				@include dfont;
				color: #5C6D80;

				image {
					width: 40rpx;
					height: 40rpx;
				}

			}
		}

		.titles {
			@include flexR;
			@include titlefont(32rpx);
			margin-bottom: 42rpx;

			.text {
				@include dfont(26rpx);
				color: #A0A0AD;
			}

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 24rpx;
			}

		}

		.selectStr {
			@include flexRS;
			width: 70%;

			view {
				@include dfont;
				color: #A0A0AD;
			}

			image {
				width: 64rpx;
				height: 64rpx;
			}
		}


	}

		.selectlist{
			@include flexR;
			flex-wrap: wrap;
			width: 100%;
			.selectItem {
				margin: 10rpx;
				width: 210rpx;
				height: 64rpx;
				@include flexRC;
				border-radius: 4rpx;
				border: 2rpx solid #E5E5EA;
				@include dfont(26rpx);
				color: #2C2C2E;
			}
			.selectItemActive {
				color: #FB652E;
				border: 2rpx solid #FB652E;
			}
			.selectItemZhActive {
				color: #FB652E;
				border: 2rpx solid #FB652E;
			}
		}
		.message {
			margin-top: 16rpx;
			@include dfont(26rpx);
			color: red;
		}

	.texts {
		width: calc(100% - 138rpx);
		margin-left: 48rpx;
		@include dfont(26rpx);
		color: #8E8E93;
		background-color: rgba(242, 242, 247, 0.5);
		border-radius: 12rpx;
		padding: 24rpx 32rpx;
		margin-bottom: 40rpx;
	}
</style>